<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>转换</title>
		<style type="text/css">
			.box{
				width: 300px;
				height: 300px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				background-color: palegreen;
				/* transform: translateX(100px) translateY(200px); */
			}
			.box2{
				width: 200px;
				height: 200px;
				margin:50px  auto;
				transition: all 2s linear;
				/* transform-origin: 转换的中心的 */
				/* 方向词:水平方向(left,center,right)  		垂直方向(top,center,bottom) */
				transform-origin: left top;
				background-color: aquamarine;
			}
			.box2:hover{
				/* 1，scale()：缩放 */
				/* 	deg:度
				2 rotate():旋转		正数顺时针，负数逆时针*/ 
				 /*3 skew():倾斜 */
				transform: scale(2,.5);
				
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<div class="box2"></div>
	</body>
</html>
